<template>
	<div class="tmpl">		
		<!--头部-->
		<mt-header fixed title="web前端"></mt-header>
		<div class='back' @click='setBack' ref='' v-show='isshow'>
			<a href="javascript:;">返回</a>
		</div>
	<!--	路由规则部分-->
		<router-view v-on:del='del'></router-view>
		<!--底部-->
		<nav class="mui-bar mui-bar-tab">
			<router-link to="/home" class="mui-tab-item" >
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">消息</span>
			</router-link>
			<router-link class="mui-tab-item" to="/goods/shopcart">
				<span class="mui-icon mui-icon-contact"><span id='shopnumber' class="mui-badge" ref='count'>0</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</router-link>
		</nav>
	</div>
</template>
<script>
	import {vm,key,key2} from './components/common/common.js';
	import {getcount,getgoodslist} from './components/common/localstorage.js'
	export default{
	    data(){
	        return{
				isshow:true
			}
		},
		watch:{
            '$route'(newurl,oldurl){
                if(newurl.path=='/home'){
                    this.isshow=false
					console.log(newurl.path)
				}else {
                    this.isshow=true
				}
            }
		},
		methods:{
			setBack(){
			    this.$router.go(-1)
			},
			del(par){
                this.$refs.count.innerText = getcount();
				console.log(par);
			}
			},
        mounted(){
	        this.$refs.count.innerText = getcount()
			this.$route.path=='/home'?this.isshow=false:this.isshow=true;
	    }
	}
    vm.$on(key,function(input){
        var count=0;
        console.log(input);
        count+=input;
        var num=(document.getElementById('shopnumber').innerText-0)+(count-0);
        num=num<=0?0:num;
        document.getElementById('shopnumber').innerText=num;
    })
	//接受从购物车页面传入进来的值；
    vm.$on(key2,function(input){
        var num1=(document.getElementById('shopnumber').innerText-0)+(input-0);
        	num1=num1<=getgoodslist().length?getgoodslist().length:num1;
        document.getElementById('shopnumber').innerText=num1;

    })

</script>

<style scoped>
	.abc{
		width:100px;
		height: 100px;
		background: red;
	}
	.back{
		color: white;
		font-size: 16px;
		line-height: 40px;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 100;
		padding: 0 10px;
	}
	.back > a{
		color: white;
	}
	.mint-header.is-fixed{
		width:100% !important;
		display: block;
		line-height: 40px;
	}
	.mint-header-title{
		margin: 0px;
		line-height: 40px;
		height: 40px;
	}
</style>